<template>
  <div class="vivid-card">
    <span class="vivid-title">{{ title }}</span>
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: 'This is a title'
  }
})
onMounted(() => {
  console.log(props.title)
})
</script>

<style scoped lang="scss">
.vivid-card {
  max-width: 20rem;
  padding: 1rem;
  background-color: var(--bg-color);
  border-radius: .625rem;
  border: .03rem solid var(--border-color);
  box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, .05);
}

.vivid-title {
  font-weight: 600;
  color: var(--text-color);

  &::after {
    content: '';
    display: block;
    position: relative;
    margin-top: .625rem;
    width: 100%;
    border-bottom: .0625rem solid var(--border-color);

  }
}
</style>
